<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Raycaster</title>
    <meta name="description" content="Raycaster - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>

<script>

  AFRAME.registerComponent('raycast-blab', {
    init: function () {
      this.el.addEventListener('raycaster-intersected', function (evt) {
        var el = evt.target;
	// May get two intersection events per tick; same element, different faces.
        console.log('raycaster-intersected ' + el.outerHTML);
        el.setAttribute('material', 'color', '#7f7');
      });

      this.el.addEventListener('raycaster-intersected-cleared', function (evt) {
        var el = evt.target;
	// May get two intersection events per tick; same element, different faces.
        console.log('raycaster-intersected-cleared ' + el.outerHTML);
        el.setAttribute('material', 'color', '#f77');
      });
    }
  });

</script>

    <a-scene>
      <a-entity camera look-controls wasd-controls raycaster="recursive: false; interval: 1000"></a-entity>
      <a-entity geometry="primitive: box" material="color: #000" position="0 0 -2" raycast-blab></a-entity>
    </a-scene>

  </body>
</html>
